import React, { Component, Suspense } from 'react';
import { connect } from 'dva';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import PageLoading from '@/components/PageLoading';
import { Card, Button, Icon, Modal, message, Form, Input, Checkbox, Col, Row,Tag,Select  } from 'antd';
import styles from '@/pages/Account/Settings/BaseView.less';
import savebuttom from '@/assets/account/robotSetup/savebuttom.png';

const { Option } = Select;
const Item = React.lazy(() => import('./item'));
const formItemLayout = {
  labelCol: { span: 1 },
  wrapperCol: { span: 20 },
};

@connect(({ collectSlot, loading }) => ({
  collectSlot,
  loading: loading.effects['collectSlot/fetchSlot'],
}))
class UserReply extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dialogSlots: [],
      nodeId: props.nodeId,
      stage: props.stage,
      dialogId: props.dialogId,// 多轮对话id
      data:{
        replies:[],
        caseType:"user_reply"
      }
    }
  }

  componentDidMount() {
    this.fetchSlot();
  }

  fetchSlot=()=>{
    const { dispatch } = this.props;
    const { dialogId,nodeId,stage} = this.state;
    let {data,dialogSlots} = this.state;
    dispatch({
      type: 'collectSlot/fetchSlot',
      payload: {
        dialogId,nodeId,stage,
        field:'data'
      },
      callback:(res)=>{
        console.log(res);
        data = res.dialogStage.data ;
        dialogSlots = res.dialogSlots;
        if(!data.replies){
          data={
            replies:[],
            caseType:"user_reply"
          }
        }
        if(!dialogSlots){
          dialogSlots=[]
        }
        this.setState({
          dialogSlots,
          data
        })
      }
    });
  };

  fixCaseArr=(arr)=>{
    let {data} = this.state;
    data.replies = arr;
    this.setState({
      data
    })
  };

  saveSlotCheck=()=>{
    const { dispatch,closeDrawer } = this.props;
    const { dialogId,nodeId,data} = this.state;
    console.info(data,'-------触发条件用户回复');
    if(data.replies.length === 0){
      return message.info('请至少添加一个相似问后进行保存')
    }
    dispatch({
      type: 'collectSlot/saveSlot',
      payload: {
        field:'data',
        _id:`${dialogId}-${nodeId}`,
        data
      },
      callback:(res)=>{
        message.info('保存成功');
        closeDrawer();
      }
    });
  };

  render() {
    const {dialogSlots,data} = this.state;
    console.log(data);
    return (
      <GridContent>
        <Suspense fallback={<PageLoading />}>
          <Col style={{paddingLeft: 25}}>
            <Item
              caseArr={data.replies}
              dialogSlots={dialogSlots}
              upDateCase={(val)=>this.fixCaseArr(val)}
              upNewData={(val)=>this.fixCaseArr(val)}
            />
            {/*<Button type="primary" htmlType='button' onClick={()=>this.saveSlotCheck()} style={{marginTop:20}}>保存</Button>*/}
            <div className={styles.flexcen}>
              <img   onClick={()=>this.saveSlotCheck()} src={savebuttom} />
            </div>
          </Col>
        </Suspense>
      </GridContent>
    );
  }
}

export default connect (({ user }) => ({
  currentUser: user.currentUser
}))(Form.create()(UserReply));
